<template>
  <div class="MessageInput">
    <SelectTab @changeTab="changeTab" :tabList="tabList" v-if="tabList.length"></SelectTab>
    <div class="content">
      <div class="header"  v-if="activeTab === 2">
        回复@：私信你了
      </div>
      <InputBox ref="InputBoxRef" :rows="5" :shiftEnter="true" @submit="submit"></InputBox>
    </div>
    <div class="footerBox">
      <el-tooltip effect="dark" placement="top-end" content="按Enter发送消息，Shift+Enter换行">
        <el-button class="small" type="primary" @click="submit">发送</el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref, computed} from 'vue'
import SelectTab from "@/components/selectTab/index"
import InputBox from "@/components/inputBox/index"
import {v4 as uuidv4} from 'uuid'
import { useStore } from "vuex"
const store = useStore()
const friend = computed(() => store.state.conversation.active)

const tabList = [
  {id: 1, name:"私信"},
  {id: 2, name:"评论"}
]
const activeTab = ref()
const changeTab = (e) => {
  activeTab.value = e
}
const InputBoxRef = ref()
const submit = () => {
  store.dispatch("websocket/send", paramsHandle())
  InputBoxRef.value.clearContent()
  store.dispatch("message/updateScrollBottom")
}
const paramsHandle = () => {
  let inputConfig = InputBoxRef.value.inputConfig
  let content = ""
  switch (inputConfig.inputType) {
    case 1: content = inputConfig.inputVal;
      break;
    case 2: content = inputConfig.imageVal;
      break;
  }
  let ack = uuidv4()
  const params = {
    ack,
    msgConversationId: friend.value.conversationId,
    from: friend.value.accountId,
    to: friend.value.id,
    type:inputConfig.inputType,
    content: content
  }
  return params
}
</script>

<style scoped lang="scss">
.MessageInput {
  height: 300px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid $borderColor;
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.footerBox {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}
.header {
  font-size: 12px;
  background: #f2f6f7;
  display: flex;
  padding: 10px 20px;
}
</style>